<template>
  <div ref="wrpa" class="rxswiper">
    <div
      class="slider-switch"
      :style="sliderSwitch"
      :class="leftSwitchClass"
      @click="leftSwitchClick"
    >
      <slot name="left"></slot>
    </div>

    <div
      class="slider-switch"
      :style="sliderSwitch"
      :class="rightSwitchClass"
      @click="rightSwitchClick"
    >
      <slot name="right"></slot>
    </div>

    <div class="realBox"
      :style="swiperWrapStyle"
      @mouseenter="mouseEnter"
      @mouseleave="mouseLeave"
      @touchmove="touchMove"
      @touchend="touchEnd"
    >
      <div ref="slotList" class="contont" :class="{'rx-h': directionHorizontal}">
        <slot></slot>
      </div>
    </div>

    <div class="dot">
      <slot name="dot"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rx-swiper', // 必须写
  props: {
    autoplay: { type: Boolean, default: false },
    timerInterval: { type: Number, default: 700 },
    navigation: { type: Boolean, default: false },
    directionHorizontal: { type: Boolean, default: true },
  },
  data () {
    return {
    }
  },
  created() {

  },
  beforeDestroy () {

  },
  computed: {
    leftSwitchClass() {
      return {}
    },
    rightSwitchClass() {
      return {}
    },
    swiperWrapStyle() {

    },
    sliderSwitch() {
      return {}
    },
  },
  methods: {
    leftSwitchClick() {

    },
    rightSwitchClick() {

    },
    mouseEnter(e) {

    },
    mouseLeave(e) {

    },
    touchMove(e) {

    },
    touchEnd(e) {

    },
  },
  watch: {
    autoPlay (newVal) {
      if (newVal) {
        this.reset()
      } else {
        this._stopMove()
      }
    }
  },
}
</script>

<style scoped>
.rxswiper { background-color: aquamarine; display: flex;}
.rxswiper .rx-h {
  flex-direction: column;
}
</style>
